.has-tooltip mat-form-field.full-width {
	width: calc( 100% - 25px )
}

.advanced-date-picker.mat-card{
  position:fixed;
  top:10%;
  left:calc(50% - 310px);
  z-index:2;
  padding:0 0 0 300px;
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
  display: block;
  border-radius: 2px;
  border-color:red;
}

.advanced-date-picker.mat-card h4.preview-label{
  /*border-bottom:solid 1px var(--bg1);*/
  padding:16px 16px 13px;
  text-align:left;
}

.advanced-date-picker.mat-card .cron-fields h4.preview-label{
  padding:0;
  display: inline-block;
  float: left;
}

.mat-calendar-content{
  width:300px; /* Width of calendar preview*/
  position:absolute;
  left:0;
  top:0;
}

.mat-calendar-content code{
  margin-left:24px;
  width:252px;
}

ul.schedule-list{
    margin-top: 16px;
    list-style-type: none;
    max-height: 231px;
    
    overflow-y: auto;
}

ul.schedule-list li{
  margin-left:16px;
  padding:4px 12px;
}

ul.schedule-list li:nth-child(odd){
  background-color:rgba(0,0,0,0.1);
}

::ng-deep .mat-calendar-body-label,
::ng-deep .mat-calendar-body-cell-content{
  color:var(--fg2);
}

.cron-fields{
  width:320px;
  min-height:100%;
  /*position:absolute;
  top:0;
  right:0;*/
  background-color:var(--primary);
  color:var(--primary-txt);
  text-align:center;
  padding:0;
}

::ng-deep mat-option .mat-option-text em.crontab{
  opacity:0.5;
}

::ng-deep .cron-fields .mat-checkbox-frame{
  border-color:var(--primary-txt);
}

::ng-deep .cron-fields .mat-form-field-label,
/*::ng-deep .cron-fields .mat-focused .mat-form-field-label,*/
::ng-deep .cron-fields label.mat-form-field-placeholder,
::ng-deep .cron-fields .mat-input-infix,
.cron-fields .mat-form-field-should-float.mat-focused label{
  color:var(--primary-txt) !important;
}

::ng-deep .mat-form-field-underline,
::ng-deep .mat-focused .mat-form-field-underline,
::ng-deep .mat-form-field-underline .mat-form-field-ripple{
  background-color:var(--primary-txt) !important;
}

.cron-fields section{
  padding:16px;
}

.cron-fields section:first-child{
  margin-bottom:0px;
}
.cron-fields section:last-child{
  padding-bottom:24px;
}

.cron-fields mat-divider{
  position:relative;
}

.cron-fields table.months,
.cron-fields table.days-of-week{
  margin:0 auto;
}

.cron-fields table td{
  padding:4px 8px 0px;
  min-width:24px;
  width:40px;
}

.cron-fields table td .month,
.cron-fields table td .weekday{
  margin-top:4px;
}

.cron-fields .invalid{
  color:var(--red) !important;
}

.cron-fields .mat-input-element {
  caret-color: var(--primary-txt) !important; 
}

/*Button Toggle Group*/
.cron-fields mat-button-toggle-group{
  margin:16px 0;
}
.cron-fields mat-button-toggle{
  font-size:12px;
  padding:7px;
}

mat-form-field.cron-presets{
  width:calc(240px + 24px );
  margin-left:16px;
  display:block;
}

.cron-fields section.m-h-d mat-form-field{
  display:inline-block;
  margin-left:16px;
  width:100px;
}

/* Calendar View Settings*/
.calendar-wrapper{
  height:300px;
}
.mat-calendar-content .controls{
    display: inline-block;
    position: absolute;
    right: 8px;
    top: 5px;
}

::ng-deep .cron-fields .mat-button-toggle-label-content{
  line-height:unset;
  padding:unset;
}

::ng-deep .mat-calendar-table{
  width:100%;
  background-color: var(--bg2);
}
::ng-deep .mat-calendar-body-cell-content,
::ng-deep .mat-calendar-body-label,
::ng-deep .mat-calendar-table{
  color: var(--fg2);
}

:host ::ng-deep thead.mat-calendar-table-header{
  /*display:none;*/
  color: var(--fg2);
  opacity: 0.5;
}

::ng-deep .mat-calendar-table-header tr{
  /*border-bottom:solid 1px var(--bg1);*/
  padding:4px;
}
::ng-deep .mat-calendar-table-header th{
  text-align: center;
  padding: 8px 0;
}
::ng-deep .mat-calendar-body td.mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content{
  background: var(--bg1);
  border-radius: 50%; 
}
::ng-deep .mat-calendar-body-today{
  border-color:var(--green) !important;
}
#no-spaces {
  position: relative;
  top: -9px;
  font-size: 75%;
}
@media screen and (max-height:700px){
  .advanced-date-picker.mat-card{
    top:-20px;
  }
}

@-moz-document url-prefix() {
  .mat-calendar-content {
    width: 280px !important;
    left: 10px !important;
  }
  .mat-calendar-body-cell-content {
    height: 36px;
    max-height: 36px;
    width: 36px;
  }
  #spacer {
    visibility: hidden;
  }
}

.time-zone-label {
  margin: 0 0 10px 20px;
}

.preset-description {
  opacity: .6;
}
